import { useState, useEffect, useRef } from "react";

const MediaStream = () => {
  const audioRef = useRef<HTMLAudioElement>(null);
  useEffect(() => {
    if (!audioRef.current) return;
    navigator.mediaDevices
      .getUserMedia({
        video: false,
        audio: true,
      })
      .then((mediaStream) => {
        audioRef.current && (audioRef.current.srcObject = mediaStream);
      });
  }, [audioRef]);
  return (
    <div className="flex flex-col items-center">
      <div>
        <audio ref={audioRef} controls autoPlay></audio>
      </div>
    </div>
  );
};

export default MediaStream;
